<template>
  <div class="feedback-list">
    <search-list
      ref="feedbackList"
      :api-url="$url.FeedbackList"
      :option="searchOpt"
      :itemPerRow="8"
    >
      <el-table-column prop="id" label="反馈ID" width="100"></el-table-column>
      <el-table-column prop="content" label="反馈内容"></el-table-column>
      <el-table-column prop="contact" label="联系方式" width="150"></el-table-column>
      <el-table-column prop="createdAt" label="反馈时间" width="150"></el-table-column>
      <el-table-column label="操作" width="150">
        <template slot-scope="scope">
          <div>
            <el-button icon="el-icon-eye" type="text" @click="check(scope.row)">
              查看
            </el-button>
          </div>
        </template>
      </el-table-column>
    </search-list>

    <el-dialog class="feedback-dialog" title="反馈详情" :visible.sync="fbDialogShow" :close-on-press-escape="false" :close-on-click-modal="false" :show-close="false" width="500px">
      <p>用户ID: {{ feedbackInfo.uid }}</p>
      <p>昵称: {{ feedbackInfo.nickname }}</p>
      <p>手机号: {{ feedbackInfo.phone }}</p>
      <p>反馈ID: {{ feedbackInfo.id }}</p>
      <p>反馈内容: {{ feedbackInfo.content }}</p>
      <p>联系方式: {{ feedbackInfo.contact }}</p>
      <p>反馈时间: {{ feedbackInfo.createdAt }}</p>
      <div>
        反馈附件:
        <div class="image-box" v-viewer>
          <img
            class="feedback-image"
            :src="image"
            v-for="(image, index) in feedbackInfo.url"
            :key="index"
          />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button icon="el-icon-close" @click="dialogClose">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    computed: {
      fbDialogShow() {
        return !!this.feedbackInfo.id;
      },
    },
    data() {
      return {
        selectedData: [],
        searchOpt: [
          {
            type: this.SEARCH_COMP_ENUM.SEARCH_INPUT,
            name: 'contact',
            label: '联系方式',
          },
        ],
        feedbackInfo: {},
      };
    },
    methods: {
      check(row) {
        this.$service
          .FeedbackInfo({
            id: row.id,
          })
          .then((res) => {
            this.feedbackInfo = { ...res };
          });
      },
      dialogClose() {
        this.feedbackInfo = {};
      },
    },
  };
</script>

<style lang="less" scoped>
  .feedback-dialog {
    line-height: 30px;
  }

  .image-box {
    display: flex;
    flex-wrap: wrap;
  }

  .feedback-image {
    width: 100px;
    height: 100px;
    display: inline;
    cursor: pointer;
    transition: all 0.2s;
    margin-right: 10px;
    &:hover {
      box-shadow: 0 5px 10px #888;
    }
  }
</style>
